<nb-layout>
  <nb-layout-column>
    <div class="row">

      <div class="col-lg-12">
        <nb-card>
          <nb-card-header>Filled Buttons</nb-card-header>
          <nb-card-body>
            <button class="btn btn-primary">Primary</button>
            <button class="btn btn-success">Success</button>
            <button class="btn btn-info">Info</button>
            <button class="btn btn-warning">Warning</button>
            <button class="btn btn-danger">Danger</button>
          </nb-card-body>
        </nb-card>
      </div>

      <div class="col-lg-12">
        <nb-card>
          <nb-card-header>Hero Buttons</nb-card-header>
          <nb-card-body>
            <button class="btn btn-hero-primary">Primary</button>
            <button class="btn btn-hero-success">Success</button>
            <button class="btn btn-hero-info">Info</button>
            <button class="btn btn-hero-warning">Warning</button>
            <button class="btn btn-hero-danger">Danger</button>
          </nb-card-body>
        </nb-card>
      </div>

      <div class="col-lg-12">
        <nb-card>
          <nb-card-header>Outline Buttons</nb-card-header>
          <nb-card-body>
            <button class="btn btn-outline-primary">Primary</button>
            <button class="btn btn-outline-success">Success</button>
            <button class="btn btn-outline-info">Info</button>
            <button class="btn btn-outline-warning">Warning</button>
            <button class="btn btn-outline-danger">Danger</button>
          </nb-card-body>
        </nb-card>
      </div>

      <div class="col-lg-12">
        <nb-card>
          <nb-card-header>Icon buttons</nb-card-header>
          <nb-card-body>
            <button class="btn btn-primary btn-icon">
              <nb-icon icon="heart-outline"></nb-icon>
            </button>
            <button class="btn btn-success btn-icon">
              <nb-icon icon="heart-outline"></nb-icon>
            </button>
            <button class="btn btn-info btn-icon">
              <nb-icon icon="heart-outline"></nb-icon>
            </button>
            <button class="btn btn-warning btn-icon">
              <nb-icon icon="heart-outline"></nb-icon>
            </button>
            <button class="btn btn-danger btn-icon">
              <nb-icon icon="heart-outline"></nb-icon>
            </button>
          </nb-card-body>
        </nb-card>
      </div>

      <div class="col-lg-12">
        <nb-card>
          <nb-card-header>Icon buttons</nb-card-header>
          <nb-card-body>
            <button class="btn btn-primary btn-with-icon">
              <nb-icon icon="heart-outline"></nb-icon> Primary
            </button>
            <button class="btn btn-success btn-with-icon">
              <nb-icon icon="heart-outline"></nb-icon> Success
            </button>
            <button class="btn btn-info btn-with-icon">
              <nb-icon icon="heart-outline"></nb-icon> Info
            </button>
            <button class="btn btn-warning btn-with-icon">
              <nb-icon icon="heart-outline"></nb-icon> Warning
            </button>
            <button class="btn btn-danger btn-with-icon">
              <nb-icon icon="heart-outline"></nb-icon> Danger
            </button>
          </nb-card-body>
        </nb-card>
      </div>

      <div class="col-lg-12">
        <nb-card>
          <nb-card-header>Button Group</nb-card-header>
          <nb-card-body>
            <div
              class="btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
              <label class="btn btn-outline-primary active">
                <input type="radio" value="left"> Left
              </label>
              <label class="btn btn-outline-primary">
                <input type="radio" value="middle"> Middle
              </label>
              <label class="btn btn-outline-primary">
                <input type="radio" value="right"> Right
              </label>
            </div>
          </nb-card-body>
          <nb-card-body>
            <div class="btn-group btn-group-toggle btn-group-full-width" data-toggle="buttons">
              <label class="btn btn-primary active">
                <input type="checkbox"> Left
              </label>
              <label class="btn btn-primary">
                <input type="checkbox"> Middle
              </label>
              <label class="btn btn-primary">
                <input type="checkbox"> Right
              </label>
            </div>
          </nb-card-body>
          <nb-card-body>
            <div class="btn-group btn-group-toggle btn-outline-toggle-group" data-toggle="buttons">
              <label class="btn btn-outline-success active">
                <input type="radio" [value]="1"> 1
              </label>
              <label class="btn btn-outline-success">
                <input type="radio" [value]="2"> 2
              </label>
              <label class="btn btn-outline-success">
                <input type="radio" [value]="3"> 3
              </label>
              <label class="btn btn-outline-success">
                <input type="radio" [value]="4"> 4
              </label>
              <label class="btn btn-outline-success">
                <input type="radio" [value]="5"> 5
              </label>
            </div>
          </nb-card-body>
          <nb-card-body>
            <div class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group">
              <label class="btn btn-outline-success active">
                <input type="radio" [value]="1"> 1
              </label>
              <label class="btn btn-outline-success">
                <input type="radio" [value]="2"> 2
              </label>
              <label class="btn btn-outline-success">
                <input type="radio" [value]="3"> 3
              </label>
            </div>
          </nb-card-body>
        </nb-card>
      </div>

      <div class="col-lg-12">
        <nb-card>
          <nb-card-header>Default Inputs</nb-card-header>
          <nb-card-body>
            <div class="input-group">
              <input type="text" placeholder="Project" class="form-control"/>
            </div>
            <div class="row full-name-inputs">
              <div class="col-sm-6 input-group">
                <input type="text" placeholder="Nick" class="form-control"/>
              </div>
              <div class="col-sm-6 input-group">
                <input type="text" placeholder="Last Name" class="form-control"/>
              </div>
            </div>
            <div class="input-group">
              <input type="password" placeholder="Password" class="form-control"/>
            </div>
            <div class="input-group has-person-icon">
              <input type="text" placeholder="With Icon" class="form-control"/>
            </div>
            <div class="input-group input-group-rounded">
              <input type="text" placeholder="Rounded border" class="form-control"/>
            </div>
            <div class="form-group">
              <input type="text" placeholder="Project" class="form-control"/>
              <small class="form-text">A block of help text that breaks into a new line and may extend beyond one line.
              </small>
            </div>
            <div class="input-group">
              <input type="text" placeholder="Disabled input" class="form-control" disabled/>
            </div>
            <div class="input-group">
              <textarea rows="5" placeholder="Text Area" class="form-control"></textarea>
            </div>
            <div class="input-group input-group-sm">
              <input type="text" placeholder="Small Input" class="form-control"/>
            </div>
            <div class="input-group input-group-lg">
              <input type="text" placeholder="Large Input" class="form-control"/>
            </div>
          </nb-card-body>
        </nb-card>

        <nb-card>
          <nb-card-header>Selects</nb-card-header>
          <nb-card-body>
            <div class="form-group">
              <label>Simple Select</label>
              <select class="form-control">
                <option>Minsk</option>
                <option>Gomel</option>
                <option>Brest</option>
                <option>Grodno</option>
                <option>Mogilev</option>
              </select>
            </div>
            <div class="form-group">
              <label>Multiple Select</label>
              <select multiple class="form-control">
                <option>Item 1</option>
                <option>Item 2</option>
                <option>Item 3</option>
                <option>Item 4</option>
                <option>Item 5</option>
              </select>
            </div>
          </nb-card-body>
        </nb-card>
      </div>

      <div class="col-lg-12">
        <nb-card>
          <nb-card-header>Input Styles</nb-card-header>
          <nb-card-body>
            <div class="input-group input-group-border-only">
              <input type="text" placeholder="Border Only" class="form-control"/>
            </div>
            <div class="input-group">
              <input type="text" placeholder="Default Input" class="form-control">
            </div>
            <div class="input-group input-group-fill-only">
              <input type="text" placeholder="Fill Only" class="form-control">
            </div>
          </nb-card-body>
        </nb-card>

        <nb-card>
          <nb-card-header>Validation States</nb-card-header>
          <nb-card-body>
            <div class="form-group">
              <input type="text" placeholder="Input with Success" class="form-control form-control-success">
            </div>
            <div class="form-group">
              <input type="text" placeholder="Input with Warning" class="form-control form-control-warning">
            </div>
            <div class="form-group">
              <input type="text" placeholder="Input with Danger" class="form-control form-control-danger">
            </div>
            <div class="form-group has-success">
              <input type="text" placeholder="Input with Success Icon" class="form-control form-control-success">
            </div>
            <div class="form-group has-warning">
              <input type="text" placeholder="Input with Warning Icon" class="form-control form-control-warning">
            </div>
            <div class="form-group has-danger">
              <input type="text" placeholder="Input with Danger Icon" class="form-control form-control-danger">
            </div>
          </nb-card-body>
        </nb-card>
      </div>

      <div class="col-lg-12">
        <nb-card style="height: 15rem;">
          <nb-card-header>Dropdowns</nb-card-header>
          <nb-card-body>
            <div ngbDropdown class="d-inline-block">
              <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
              <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                <button ngbDropdownItem>Action - 1</button>
                <button ngbDropdownItem>Another Action</button>
                <button ngbDropdownItem>Something else is here</button>
              </div>
            </div>
          </nb-card-body>
        </nb-card>
      </div>

      <div class="col-lg-12">
        <nb-card>
          <nb-card-header>Modal</nb-card-header>
          <nb-card-body>
            <button class="btn btn-primary" (click)="openModal(modalContent)">Open modal</button>

            <ng-template #modalContent let-modal>
              <div class="modal-header">
                <h4 class="modal-title" id="modal-basic-title">Title</h4>
                <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                Modal body
              </div>
              <div class="modal-footer">
                Footer
              </div>
            </ng-template>
          </nb-card-body>
        </nb-card>
      </div>
    </div>

  </nb-layout-column>
</nb-layout>
